<template>
  <div class="details container">
    <!-- 头部 -->
    <base-header
      :courseInfo="detailInfo"
      :wxpayQrcode="$util.isEmpty(shareData) ? '' : shareData.share_url_h5"
      :loading="loading"
      @reload="handleReload"
    ></base-header>
    <!-- tab -->
    <el-row class="tab-wrap">
      <div class="tab-left">
        <el-tabs v-model="activeName">
          <el-tab-pane label="详情" name="detail">
            <div v-if="detailInfo.info" class="detail-content" v-html="detailInfo.info"></div>
          </el-tab-pane>
          <el-tab-pane name="directory">
            <span slot="label">
              <i
                class="edu-icon-shikan1 tag-icon"
                v-if="detailInfo.audition_stat === 1 && detailInfo.is_buy === 0"
              ></i>
              目录
            </span>
            <div class="directory-wrap">
              <template v-if="detailInfo.course_type == 1 || detailInfo.course_type == 2">
                <course-directory
                  :course_id="detailInfo.id"
                  :detailInfo="detailInfo"
                ></course-directory>
              </template>
              <template v-else-if="detailInfo.course_type == 4">
                <classes-directory
                  :classId="detailInfo.id"
                  :detailInfo="detailInfo"
                ></classes-directory>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论" name="review" v-if="switchComment">
            <course-comment :detailInfo="detailInfo"></course-comment>
          </el-tab-pane>
          <el-tab-pane v-if="switchCourseExam == 1" label="考试" name="exam">
            <course-exam
              :list="detailInfo.exam"
              :course_id="detailInfo.id"
              :can_exam="detailInfo.can_exam"
            ></course-exam>
          </el-tab-pane>
          <el-tab-pane v-if="switchCourseware == 1" label="课件" name="file">
            <course-file :course_buy="detailInfo.is_buy"></course-file>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 右侧 -->
      <template v-if="detailInfo.course_type == 1 || detailInfo.course_type == 2">
        <offside-teachers
          :detailInfo="detailInfo"
          v-if="!$util.isEmpty(detailInfo)"
        ></offside-teachers>
      </template>
      <template v-else-if="detailInfo.course_type == 4">
        <offside-classes
          :classesData="detailInfo"
          v-if="!$util.isEmpty(detailInfo)"
        ></offside-classes>
      </template>
    </el-row>
    <!-- 课程推荐 -->
    <course-recommend></course-recommend>
    <!-- 分享 -->
    <course-share :pintuan_data="detailInfo.pintuan_data"></course-share>
    <!-- 拼团 -->
    <my-pintuan-list @reload="handleReload" v-if="pintuanVisible"></my-pintuan-list>

    <!-- 砍价 -->
    <my-bargain v-if="bargainVisible"></my-bargain>
  </div>
</template>

<script>
import BaseHeader from './components/baseHeader'
import MyPintuanList from './components/myPintuanList'
import MyBargain from './components/myBargain'
import OffsideTeachers from '../components/offsideTeachers'
import OffsideClasses from '../components/offsideClasses'
import CourseDirectory from '../components/courseDirectory'
import ClassesDirectory from '../components/classesDirectory'
import CourseComment from '../components/courseComment'
import CourseRecommend from '../components/courseRecommend'
import CourseShare from '../components/courseShare'
import CourseExam from '../components/courseExam'
import CourseFile from '../components/courseFile'
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    BaseHeader,
    OffsideTeachers,
    OffsideClasses,
    CourseDirectory,
    ClassesDirectory,
    CourseComment,
    CourseRecommend,
    CourseShare,
    CourseExam,
    MyPintuanList,
    MyBargain,
    CourseFile
  },
  inject: ['reload'],
  data() {
    return {
      activeName: 'detail',
      detailInfo: {},
      shareData: {},
      loading: true,
      list: [],
      thatTime: 0
    }
  },
  computed: {
    ...mapState({
      pintuanVisible: state => state.promotion.pintuanVisible,
      bargainVisible: state => state.promotion.bargainVisible
    }),
    ...mapGetters({
      switchComment: 'projectSetting/getGlobCourseCommentSwitch',
      switchCourseware: 'projectSetting/getGlobCoursewareSwitch',
      switchCourseExam: 'projectSetting/getGlobCourseExamSwitch'
    })
  },
  watch: {
    $route(n, o) {
      if (n != o) {
        this.reload()
      }
    }
  },
  methods: {
    ...mapMutations({
      faceSetVisible: 'faceRecognition/inVisible'
    }),
    // 获取详情新内容
    getCourseDetailInfo() {
      this.loading = true
      this.$api.getCourseDetail(
        this.$route.params.id,
        res => {
          let data = res.data
          this.detailInfo = data
          this.loading = false
        },
        err => {
          this.$message.error(err.msg)
        }
      )
    },
    // 重构数据
    handleReload() {
      this.getCourseDetailInfo()
    },
    handleFaceClose() {
      this.faceSetVisible(false)
    }
  },
  created() {
    let query = {
      type: 1,
      id: this.$route.params.id
    }
    this.$api.getShareInfo(query, res => {
      this.shareData = res.data
    })
    this.getCourseDetailInfo()
  }
}
</script>

<style lang="scss" scoped>
.details {
  margin-top: 10px;
  margin-bottom: 50px;
  .directory-wrap {
    padding: 0 20px 50px 10px;
  }
  .detail-content {
    padding: 10px 30px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #303133;
    line-height: 24px;
    letter-spacing: 1px;
    word-wrap: break-word;
    ::v-deep img {
      max-width: 100%;
    }
  }
  // 主体
  .tab-wrap {
    margin-top: 15px;
    .tab-left {
      float: left;
      width: 820px;
      background-color: #ffffff;
      .iframe-wrapper {
        min-height: 500px;
      }
      ::v-deep .el-tabs {
        .el-tabs__active-bar {
          display: none;
        }
        .el-tabs__item {
          padding: 0 40px;
          .tag-icon {
            position: absolute;
            right: 12px;
            top: 5px;
            color: #67c23a;
            font-size: 16px;
            line-height: 1;
          }
        }
        .el-tabs__nav-wrap::after {
          height: 1px;
        }
      }
      .comment-list {
        padding: 0 25px 50px;
      }
    }
  }
}
</style>
